<template>
  <van-nav-bar title="确认订单" left-text="返回" left-arrow @click-left="onClickLeft" />
  <van-cell-group inset>
    <van-cell title="配送地址" icon="location-o" />
    <van-cell  :title="(userDefualtAddress.userProvince + userDefualtAddress.userCity +userDefualtAddress.userDistrict + userDefualtAddress.userAddress)"
      :label="(userDefualtAddress.userName + '     ' + userDefualtAddress.userTel)" is-link />
  </van-cell-group>
  <van-cell-group inset>
    <van-cell :title="store.storeName" />
    <van-cell>
      <van-list v-model:loading="loading" v-for="item in cartlist" :finished="finished" finished-text=""
        @load="cartlist">
        <van-card :title="item.goodsName" :thumb="getHeadImageUrl(item.goodsHeadImage)" style="width: 300px;">

          <template #num>
            x{{ item.goodsNum }}
          </template>
          <template #price>
            <span>￥ {{ item.goodsPrice }} </span>
          </template>
        </van-card>
      </van-list>
    </van-cell>
    <van-cell title="总计 " :value="'￥' + totalPrice" />
    <van-cel>
    <van-action-bar>    
      <van-action-bar-button type="warning" text="我再想想" @click="onthink" />
      <van-action-bar-button type="danger" text="立即购买" @click="onSubmit"/>
    </van-action-bar>
  </van-cel>
  </van-cell-group>

</template>

<script setup>
import { Dialog } from 'vant';
import { onBeforeMount, reactive, ref, defineProps, toRefs } from 'vue';
import { Toast } from 'vant';
import { useRouter, useRoute } from "vue-router";

import http from '@/utils/request.js'
import { getHeadImageUrl } from '@/utils/api.js'
import { deepCopy } from '@/utils/object.js';
//import { ref } from 'vue';
const totalPrice = ref(0);
const loading = ref(false);
const finished = ref(true);  //用户下拉时是否需要继续加载
const VanDialog = Dialog.Component;
const router = useRouter();
const onClickLeft = () => Dialog.confirm({
  title: '提示',
  message:
    ' 要放弃选择的菜品吗？选购的菜品会丢失哦',
})
  .then(() => {
    // on confirm
    history.back();
  })
  .catch(() => {
    // on cancel
  });

const addressList = reactive([
  {
    consigneeName: "钟离", userGender: 1, userTel: 18169519251,
    userProvince: "宁夏", userCity: "银川",
    userDistrict: "西夏区",
    userAddress: "宁夏大学",
  }
])

// 写入数据：
// localStorage.setItem('shoucangkey',JSON.stringify(shoucangkey))
//读取数据：
const cartlist = eval(localStorage.getItem("cart"))
function gettotalPrice() {
  let price = 0;
  cartlist.forEach((item) => {
    price += item.goodsNum * item.goodsPrice
  })
  totalPrice.value = price;
  console.log(totalPrice.value);
}
const props = defineProps(['storeId'])
const store = reactive({ storeId: props.storeId, })
console.log(store.storeId);
//获取店铺信息
const getStoreMes = function () {
  http.get(
    '/store/' + store.storeId
  ).then((res) => {
    console.log('获取当前的店铺的信息：', res.data);
    deepCopy(store, res.data.data);
    console.log('获取当前的店铺的信息【store】：', store);
  })
}

const userDefualtAddress =reactive([]);
//获取默认地址
const getDefualtAddress = function () {
  http.get(
    '/address/defualt'
  ).then((res) => {
    console.log('获取默认地址信息：', res.data);
    deepCopy(userDefualtAddress, res.data.data);
    console.log("[userDefualtAddress]",userDefualtAddress);
  })
}

const onthink = function () {
  router.push("/orderthink");
}

const onSubmit = function () {
  router.push("/ordersubmit");
}

const onClickIcon = () => Toast('点击图标');
const onClickButton = () => Toast('点击按钮');
gettotalPrice();
getStoreMes();
getDefualtAddress();
console.log(cartlist);
</script>